<%--
  Created by IntelliJ IDEA.
  User: 欣悦 梁
  Date: 2022/3/7
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>宠宠欲动</title>
    <link href="${pageContext.request.contextPath}/css/indexLxy.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>


</head>
<body>
<jsp:include page="navigation/navigation.jsp"></jsp:include>
<!--     导行条-->
<div class="div1">
    <ul>
        <li>
            <a href="javascript:void(0)" class="a3">狗狗</a>
        </li>
        <li>
            <a href="javascript:void(0)" class="a2">商品分类</a>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/product/seckillhome.jsp"  class="a4">秒杀专场</a>
        </li>
        <li>
            <a href="javascript:void(0)" class="a4">潮品视频</a>
        </li>
        <li>
            <a href="javascript:void(0)" class="a4">小剧场</a>
        </li>
        <li>
            <a href="javascript:void(0)" class="a4">宠宠课堂</a>
        </li>
        <li>
            <a href="javascript:void(0)" class="a4">萌爪联盟</a>
        </li>
        <li>
            <a href="javascript:void(0)" class="a4">清仓特价</a>
        </li>

    </ul>
</div>

<!--大图横幅-->
<div class="bigImg_bg">
    <ul class="bigImg_kuang">
        <li>
            <h3>
                <a href="commodity_classification/commodityClassification.html">主粮</a>
            </h3>
        </li>
        <li>
            <h3>
                <a href="java:void(0)">生活</a>
            </h3>
        </li>
        <li>
            <h3>
                <a href="java:void(0)">零食</a>
            </h3>
        </li>
        <li>
            <h3>
                <a href="java:void(0)">玩具</a>
            </h3>
        </li>
        <li>
            <h3>
                <a href="java:void(0)">生活</a>
            </h3>
        </li>
        <li>
            <h3>
                <a href="java:void(0)">洗澡</a>
            </h3>
        </li>
    </ul>

    <div class="layui-carousel"style="float: left" id="test10">
        <div carousel-item="">
            <div><img src="images/bigImg.jpg"></div>
            <div><img src="images/bigImg2.jpg" tppabs="http://res.layui.com/static/images/layui/demo/2.png"></div>
            <div><img src="images/bigImg3.jpg" tppabs="http://res.layui.com/static/images/layui/demo/3.png"></div>
            <div><img src="images/bigImg4.jpg" tppabs="http://res.layui.com/static/images/layui/demo/4.png"></div>
            <div><img src="images/bigImg5.jpg" tppabs="http://res.layui.com/static/images/layui/demo/5.png"></div>
            <div><img src="images/bigImg.jpg" tppabs="http://res.layui.com/static/images/layui/demo/6.png"></div>
            <div><img src="images/bigImg4.jpg" tppabs="http://res.layui.com/static/images/layui/demo/7.png"></div>
        </div>
    </div>
    <ul class="bigImg_kuangright">
        <li>
            <h3>如何饲养小奶猫？</h3>
            <p>小奶猫虽好，却很难饲养，关于如何很好的养护小奶猫？E博士想给你说几点必要事项。</p>
        </li>
        <li>
            <h3>狗狗日常食物需是哪些？</h3>
            <p>跟着E博士做足功课，了解狗狗日常需要的食物是什么，就不用担心狗狗营养不达标啦！</p>
        </li>
        <li>
            <h3>新手养猫三件套</h3>
            <p>小奶猫虽好，却很难饲养，关于如何很好的养护小奶猫？
                E博士想给你说几点必要事项。</p>
        </li>
    </ul>

</div>

<!--秒杀模块-->
<div class="seckill">
    <!--  秒杀倒计时-->
    <div class="seckill_red">
        <h1>商品秒杀</h1>
        <div class="countdown">
            <strong>14:00</strong>
            点场 距结束
        </div>
        <span class="timmer_hours">00</span>
        <span style=" font-size: 30px;">:</span>
        <span class="timmer_minutes">10</span>
        <span style=" font-size: 30px;">:</span>
        <span class="timmer_second">54</span>
    </div>
    <!-- 秒杀商品列表-->
    <ul class="seckill_list">
        <li>
            <a class="" href="javascrip:void(0)">
                <div class="seckill_zhanw"></div>
                <img src="images/seckill_shop1.jpg">
                <p class="seckill_msg">
                    白云边20年 白酒
                </p>
                <span style="color: #e1251b">￥</span>
                <span class="seckill_price">448.00</span>
            </a>
        </li>
        <li>
            <a class="" href="javascrip:void(0)">
                <div class="seckill_zhanw"></div>
                <img src="images/seckill_shop1.jpg">
                <p class="seckill_msg">
                    白云边20年 白酒
                </p>
                <span style="color: #e1251b">￥</span>
                <span class="seckill_price">448.00</span>
            </a>
        </li>
        <li>
            <a class="" href="javascrip:void(0)">
                <div class="seckill_zhanw"></div>
                <img src="images/seckill_shop1.jpg">
                <p class="seckill_msg">
                    白云边20年 白酒
                </p>
                <span style="color: #e1251b">￥</span>
                <span class="seckill_price">448.00</span>
            </a>
        </li>
        <li>
            <a class="" href="javascrip:void(0)">
                <div class="seckill_zhanw"></div>
                <img src="images/seckill_shop1.jpg">
                <p class="seckill_msg">
                    白云边20年 白酒
                </p>
                <span style="color: #e1251b">￥</span>
                <span class="seckill_price">448.00</span>
            </a>
        </li>
        <li>
            <a class="" href="javascrip:void(0)">
                <div class="seckill_zhanw"></div>
                <img src="images/seckill_shop1.jpg">
                <p class="seckill_msg">
                    白云边20年 白酒
                </p>
                <span style="color: #e1251b">￥</span>
                <span class="seckill_price">448.00</span>
            </a>
        </li>
    </ul>
</div>

<!--信息推送 — 狗主粮-->
<div class="pushDog">
    <h1>狗狗主粮</h1>
    <div class="pushDogimg">
        <a  class="bggg" href="${pageContext.request.contextPath}/product/20004"></a>
        <ul class="pushDogMessage">

        </ul>
    </div>
</div>

<!--信息推送 — 狗零食-->
<div class="pushDogSnacks">
    <h1>狗狗零食</h1>
    <div class="pushDogSnacksimg">
        <a href="java:void(0)"></a>
        <ul class="pushDogSnacksMessage">
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
            <li>
                <img src="images/pushDogmesslxy.jpg">
                <h2>加拿大原装进口 原始猎食渴望 六种鱼肉+美毛专用配方 全犬粮 2kg</h2>
                <p style="margin-left: 60px">￥</p><p>300.00</p>
            </li>
        </ul>
    </div>
</div>


<jsp:include page="navigation/footer.jsp"></jsp:include>

<script>
  // 项目启动时从controller获取项目信息。
  loadPro();

  // 首页加载商品信息。Ajax请求
  function loadPro() {
    var url = "${pageContext.request.contextPath}/product/productRecommen";

    $.get(url
      ,null
      ,function (result) {
        var proArr = result.data.list;//存放查找到的推荐商品信息。
        console.log("商品数量长度" + proArr.length)

        for (var i = 0; i < proArr.length; i++) {
          var proImg = proArr[i].productPic;
          var proMsg = proArr[i].productMsg;
          var proPrice = proArr[i].productPrice;
          var proId = proArr[i].productId;

          var liEle = '<li>\n' +
            '<a href="${pageContext.request.contextPath}/product/' + proId + '" target="_blank">\n' +
          '<img src="' + proImg + '">\n' +
          '<h2>'+ proMsg + '</h2>\n'+
          '<p style="margin-left: 60px">￥</p><p>' + proPrice + '</p>\n' +
            '</a>'
          + '</li>'

          $(".pushDogMessage").append(liEle);
        }

      }

    ,"json");

  }
    layui.use(['rate'], function() {
        var rate = layui.rate;
        rate.render({
            elem: '#test6', value: 1.5, half: true, text: true, setText: function (value) {
                this.span.text(value);
            }
        })
    })
    $("#test6").click(function(){
        var score = $("#test6 span").text();
        console.log("评分：" + score);
    })

    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '710px'
            ,height: '340px'
            ,interval: 5000
        });
    });


</script>
</body>
</html>
